{% extends 'base/base.html' %}
{% load static %}

{% block css %}
    <link href="/static/index/css/default.css" rel="stylesheet">
    <link href="/static/wenjuanresult/select_t.css" rel="stylesheet">
    <link href="/static/css/bootstrap-multiselect.css" rel="stylesheet">
{% endblock %}

<!-- 主页默认 content -->
{% block content %}
    <div class="section-block-grey">
        <div class="center-holder section-heading" style="margin-top:4rem;margin-bottom: 6rem;">
            <p style="font-size:30px"><b>脑出血问卷数量统计</b></p>
        </div>
        <div id="thumbnailUploadContainer" class="col-sm-10" style="float: left; margin-right: 50px;">
            <select id="self_select" class="btn btn-dark  dropdown-toggle" type="button"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <div class="dropdown-menu">
                    <option value="总统计">总统计</option>
                    <option value="湖南省">湖南省</option>
                    <option value="湖北省">湖北省</option>
                    <option value="江西省">江西省</option>
                    <option value="河南省">河南省</option>
                    <option value="安徽省">安徽省</option>
                </div>
            </select>
            <input id="checkButton" type="button" class="btn btn-dark" style="width: 60px;height: 35px;"
                   value="查询"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12" style="margin-bottom: 10rem;">
            {#            background-color:#F7F7F7#}
            <p id="id01" style="font-weight: bolder;font-size: 20px;text-align: center">
                录入问卷总计:套。脑出血患者问卷:套 健康人群问卷:套。脑出血患者问卷(医院):套。健康人群问卷(体检中心):套。随访问卷:套。</p>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div  id="table1" style="width: 100%;height: 400px;margin-top:20rem"></div>
        <div  id="table2" style="width: 100%;height: 300px"></div>
        <br class="row"><br/>
    </div>
{% endblock %}


{% block js %}
    <script src="/static/js/echarts.js"></script>
    <script>
        var id01 = document.getElementById("id01");
        var count = 0
        for (var i = 0; i < 5; i++) {
            count = count + {{ wenjuancont }}[i]
        }
        id01.innerHTML = "录入问卷总计:" + count + "套。脑出血患者问卷:" + {{wenjuancont}}[0] + "套。健康人群问卷:" + {{wenjuancont}}[1] + "套。<br>" +
            "脑出血患者问卷(医院):" + {{wenjuancont}}[2] + "套。健康人群问卷(体检中心):" + {{wenjuancont}}[3] + "套。随访问卷:" + {{wenjuancont}}[4] + "套。";
        var myChart = echarts.init(document.getElementById("table1"))
        var data = ["脑出血患者问卷", "健康人群问卷", "脑出血患者问卷(医院)", "健康人群问卷(体检中心)", "随访问卷"];
        var seriesdata = [
            {name: "脑出血患者问卷", value: {{wenjuancont}}[0]},
            {name: "健康人群问卷", value: {{wenjuancont}}[1]},
            {name: "脑出血患者问卷(医院)", value: {{wenjuancont}}[2]},
            {name: "健康人群问卷(体检中心)", value: {{wenjuancont}}[3]},
            {name: "随访问卷", value: {{wenjuancont}}[4]},
        ]
        var option = {
            title: {
                text: '各类已入库问卷数量统计',
                left: "center"
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: "horizontal",
                position: "center",
                top: "7%"
            },
            series: [
                {
                    name: "问卷类型",
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: seriesdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);

        var myChart2 = echarts.init(document.getElementById("table2"));
        var seriesdata2 ={{shengCount}};
        var option2 = {
            title: {
                text: "中部五省入库问卷数量",
                left: "center"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["湖南省", "安徽省", "湖北省", "江西省", "河南省"],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '入库问卷数量',
                    type: 'bar',
                    barWidth: '40%',
                    color: '#2A3F54',
                    data: seriesdata2,
                }
            ]
        };
        myChart2.setOption(option2);
    </script>
    <script>

        $("#checkButton").on("click", function () {
            var sheng = $("#self_select").val();
            $.ajax({
                type: "post",
                data: {"sheng": sheng},
                url: "{% url 'wenjuanNum_check' %}",
                cache: false,
                success: function (data) {
                    echarts.init(document.getElementById('table1')).dispose();
                    echarts.init(document.getElementById('table2')).dispose();
                    var myChart = echarts.init(document.getElementById("table1"))
                    // 指定图表的配置项和数据
                    if (sheng === "总统计") {
                        id01.innerHTML = "录入问卷总计:" + count + "套。脑出血患者问卷:" + {{wenjuancont}}[0] + "套。健康人群问卷:" + {{wenjuancont}}[1] + "套。<br>" +
                            "脑出血患者问卷(医院):" + {{wenjuancont}}[2] + "套。健康人群问卷(体检中心):" + {{wenjuancont}}[3] + "套。随访问卷:" + {{wenjuancont}}[4] + "套。";
                        myChart.setOption(option);
                        var myChart2 = echarts.init(document.getElementById("table2"))
                        myChart2.setOption(option2);
                    } else {
                        data = JSON.parse(data);
                        id01.innerHTML = "";
                        var option1 = {
                            title: {
                                text: sheng + '数据库存储量',
                                x: 'center',
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['待提交', '待审核', '审核通过'], // 颜色说明
                                x: 'right',


                            },
                            xAxis: {
                                data: ["脑出血患者问卷", "健康人群问卷", "脑出血患者问卷(医院)", "健康人群问卷(体检中心)", "随访调查问卷"] // x轴数据。
                            },
                            yAxis: {},
                            toolbox: {
                                saveAsImage: {show: true}
                            },
                            series: [{
                                name: '待提交', // 柱状图名字，位于柱状图的正上方。
                                type: 'bar', // 柱状图。
                                data: data.y1,
                                label: {
                                    normal: {
                                        show: true,
                                        // 数据在柱子头部显示
                                        position: 'top',
                                        textStyle: {
                                            // color: '#5475c7',
                                            fontSize: 16,
                                        }
                                    }
                                },

                            },

                                {
                                    name: '待审核', // 柱状图名字，位于柱状图的正上方。
                                    type: 'bar', // 柱状图。
                                    data: data.y2,
                                    label: {
                                        normal: {
                                            show: true,
                                            // 数据在柱子头部显示
                                            position: 'top',
                                            textStyle: {
                                                // color: '#5475c7',
                                                fontSize: 13,
                                            }
                                        }
                                    },

                                },

                                {
                                    name: '审核通过', // 柱状图名字，位于柱状图的正上方。
                                    type: 'bar', // 柱状图。
                                    data: data.y3,
                                    label: {
                                        normal: {
                                            show: true,
                                            // 数据在柱子头部显示
                                            position: 'top',
                                            textStyle: {
                                                // color: '#5475c7',
                                                fontSize: 16,
                                            }
                                        }
                                    },

                                },
                            ]
                        };
                        myChart.setOption(option1);
                    }
                }
            })
        })
    </script>
{% endblock %}
